<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_1425833_spyibewazhe.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/detail.css">
    <link rel="stylesheet" href="./css/cart.css">
    <script src="./js/jquery-1.11.3.js"></script>
    <!-- <script src="./js/cart.js"></script> -->

    <style>
        body {
            background-color: rgb(255, 245, 242);
        }
    </style>
</head>

<body>
    <!-- header部分开始 -->
    <div class="header">
        <div class="top-bar wrap">
            <div class="head-lang">
                <div class="region-selection">
                    <h4 class="selected-region">中文</h4>
                    <i class="iconfont icon-xialajiantou icon-arrow"></i>
                </div>
                <div class="separate-line"></div>
                <div class="currency-selection">
                    <h4>RMB ￥</h4>
                </div>
            </div>
            <div class="head-site logged-in">
                <span class="login"><a href="javascript:void(0)">登录</a></span>
                <div class="separate-line"></div>
                <span class="register"><a href="javascript:void(0)">注册</a></span>
                <div class="separate-line"></div>
                <span class="collection"><a href="javascript:void(0)"><i
                            class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu- xin"></i></a></span>
            </div>
            <div class="head-logo">
                <a href="https://www.secoo.com"><img src="./images/logo.jpg" alt=""></a>
            </div>
        </div>
    </div>
    <!-- header部分结束 -->

    <!-- cart部分开始 -->
    <div class="main">
        <ul class="title">
            <li>
                <input id="checkAll" type="checkbox" />
                <span>全选</span>
            </li>
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>小计</li>
            <li>操作</li>
        </ul>
        <ul class="list">
            <!-- <li data-id="11">
                <div class="list_item check">
                    <input class="checkone" type="checkbox" />
                </div>
                <div class="list_item goods">
                    <div class="pickture"><img src="./images/source/15.jpg" /></div>
                    <div class="name">荣耀10 GT游戏加速 AIS手持夜景 6GB+64GB 幻影蓝全网通 移动联通电信4G 双卡双待</div>
                </div>
                <div class="list_item price">￥<span class="priceone">1000.31</span></div>
                <div class="list_item number">
                    <input class="reduce" type="button" value="-" />
                    <input class="numbox" type="text" value="1" />
                    <input class="plus" type="button" value="+" />
                </div>
                <div class="list_item subtotal">1000.31</div>
                <div class="list_item delete">删除</div>
            </li> -->

        </ul>
        <ul class="foot">
            <li id="removes" class="delall">删除</li>
            <li>
                已选商品<span id="checknum">0</span>件&nbsp;&nbsp;&nbsp;&nbsp;
                合计：￥<span id="allPrice">0</span>
            </li>
            <li id="payfor">结算</li>
        </ul>
    </div>
    <!-- cart部分结束 -->

    <!-- footer部分开始 -->
    <div class="footer">
        <div class="wrap">
            <ul class="footer-links cl">
                <li class="service-information">
                    <h4 class="links-title">服务指南</h4>
                    <ul class="links-ul">
                        <li class="links-item"><a href="">Investors</a></li>
                        <li class="links-item"><a href="">物流配送</a></li>
                        <li class="links-item"><a href="">售后服务</a></li>
                        <li class="links-item"><a href="">联系我们</a></li>
                        <li class="links-item"><a href="">加入我们</a></li>
                        <li class="links-item"><a href="">帮助</a></li>
                        <li class="links-item"><a href="">寺库招商</a></li>
                    </ul>
                </li>
                <li class="public-media">
                    <h4 class="links-title">公共媒体</h4>
                    <div class="footer-logo">
                        <div class="weibo">
                            <i class="iconfont icon-weibo"></i>
                            <span class="zh">微博</span>
                        </div>
                        <div class="wechat">
                            <i class="iconfont icon-weixin"></i>
                            <span class="zh">微信</span>
                        </div>
                    </div>
                </li>
                <li class="our-app">
                    <h4 class="links-title">我们的APP</h4>
                    <ul class="app-ul">
                        <li class="links-item"><a href="">寺库商城</a></li>
                        <li class="links-item"><a href="">Try Try</a></li>
                        <li class="links-item"><a href="">寺库艺术</a></li>
                    </ul>
                </li>
            </ul>
            <div class="footer-info">
                <p>
                    <span><a href="">京公安备11010102001392</a></span>
                    <span><a href="">京ICP证110119号 京ICP备09084709号-3</a></span>
                    <span><a href="">ISO9001中国质量管理体系认证</a></span>
                    <span><a href="">出版物经营许可证</a></span>
                    <span><a href="">食品经营许可证</a></span>
                    <span><a href="">京B2-20181305</a></span>
                </p>
                <p>
                    <span>京食药网食备201810026</span>
                    <span>客服电话：400-875-6789</span>
                    <span>COPYRIGHT © 2010-2018 北京寺库商贸有限公司 版权所有</span>
                </p>
                <p class="footer-info-imgs">
                    <a href=""><img src="./images/f_01.jpg" alt=""></a>
                    <a href=""><img src="./images/kexin.jpg" alt=""></a>
                    <a href=""><img src="./images/cnnic.png" alt=""></a>
                    <a href=""><img src="./images/f_03.jpg" alt=""></a>
                </p>
            </div>
        </div>
    </div>
    <!-- footer部分结束 -->
</body>
<script src="./js/cookie.js"></script>
<script>
    var oList = document.querySelector('.list');
    var loginId = getCookie("loginId");
    // console.log(loginId);
    var oCheckAll = document.querySelector('#checkAll');

    // var config = { url: "http://lk1299117937.gz01.bdysite.com/" };

    if (loginId) {
        var xhr = new XMLHttpRequest();
        xhr.open("get", /*`http://localhost/Secoo/php/myshoppingcar.php?userid=${loginId}`*/ `http://lk1299117937.gz01.bdysite.com/Secoo/php/myshoppingcar.php?userid=${loginId}`);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var list = JSON.parse(xhr.responseText);
                // console.log(list);
                if (list.length) {
                    var html = "";
                    list.forEach(item => {
                        var {
                            id,
                            goodsid,
                            goodsname,
                            goodsnum,
                            goodsprice,
                            goodsimg
                        } = item;
                        html += `<li data-id=${id} id="tr_${id}">
                                    <div class="list_item check">
                                        <input class="checkone" data-id="${id}" type="checkbox" />
                                    </div>
                                    <div class="list_item goods">
                                        <div class="pickture"><img src="${goodsimg}" /></div>
                                        <div class="name">${goodsname}</div>
                                    </div>
                                    <div class="list_item price">￥<span class="priceone">${(goodsprice * 1).toFixed(2)}</span></div>
                                    <div class="list_item number">
                                        <input class="reduce" type="button" data-id="${id}" data-price="${goodsprice}" value="-"  />
                                        <input class="numbox" type="text" value="${goodsnum}" />
                                        <input class="plus" type="button" data-id="${id}" data-price="${goodsprice}" value="+" />
                                    </div>
                                    <div class="list_item subtotal">${(goodsnum * goodsprice).toFixed(2)}</div>
                                    <div class="list_item delete" data-id=${id}>删除</div>
                                </li>`;
                    });
                    oList.innerHTML = html;
                } else {
                    alert('啥也没有');
                }
            }
        }
    } else {
        //用户没有登陆
        alert('还没登陆?即将前往登录页面')
        setCookie("backUrl", window.location.href);
        window.location.href = "./login/login.html";
    }

    document.onclick = function (e) {
        var ev = event || e;
        switch (ev.target.className) {
            case "plus":
                var id = ev.target.getAttribute("data-id");
                // console.log(id);
                var xhr = new XMLHttpRequest();
                xhr.open('get', /*`http://localhost/Secoo/php/updatemyshoppingcar.php?id=${id}&num=1`,*/  `http://lk1299117937.gz01.bdysite.com/Secoo/php/updatemyshoppingcar.php?id=${id}&num=1`);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var res = JSON.parse(xhr.responseText);
                        // console.log(res);
                        if (res.code == 1) {
                            let numboxInput = ev.target.previousElementSibling;
                            numboxInput.value = numboxInput.value * 1 + 1;
                            // console.log(numboxInput,  numboxInput.value);
                            let reduceInput = numboxInput.previousElementSibling;
                            reduceInput.innerHTML = '-';
                            var price = ev.target.getAttribute("data-price");
                            var totalDiv = ev.target.parentNode.nextElementSibling;
                            totalDiv.innerHTML = (numboxInput.value * price).toFixed(2);
                        } else {
                            alert(res.msg);
                        }
                        getTotal();
                    }
                }
                break;

            case "reduce":
                //减少之前 看是否大于1 
                var id = ev.target.getAttribute("data-id");
                var price = ev.target.getAttribute("data-price");
                var numboxInput = ev.target.nextElementSibling;
                var count = numboxInput.value;

                if (count > 1) {
                    //减少数量
                    var xhr = new XMLHttpRequest();
                    xhr.open("get", /*`http://localhost/Secoo/php/updatemyshoppingcar.php?id=${id}&num=-1`*/ `http://lk1299117937.gz01.bdysite.com/Secoo/php/updatemyshoppingcar.php?id=${id}&num=-1`);
                    xhr.send();
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            var res = JSON.parse(xhr.responseText);
                            // console.log(res);
                            if (res.code == 1) {
                                numboxInput.value -= 1;
                                if (numboxInput.value == 1) {
                                    ev.target.disabled = "true";
                                }
                                var totalDiv = ev.target.parentNode.nextElementSibling;
                                totalDiv.innerHTML = (numboxInput.value * price).toFixed(2);
                            } else {
                                alert(obj.msg);
                            }
                            getTotal();
                        }
                    }
                }
                return false;
                break;

            case "list_item delete":
                var id = ev.target.getAttribute("data-id");
                // console.log(id)
                var xhr = new XMLHttpRequest();
                xhr.open("get", /*`http://localhost/Secoo/php/myshoppingcardel.php?ids=${id}`*/ `http://lk1299117937.gz01.bdysite.com/Secoo/php/myshoppingcardel.php?ids=${id}`);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var res = JSON.parse(xhr.responseText);
                        // console.log(res);
                        if (res.code == 1) {
                            e.target.parentNode.remove();
                        }
                        getTotal();
                    }
                }
                break;

            case "delall":
                //找到被选中id
                var checkOneList = document.querySelectorAll(".main .checkone");
                //找到所有的集合
                var idsList = [];
                for (var i = 0; i < checkOneList.length; i++) {
                    if (checkOneList[i].checked) {
                        var id = checkOneList[i].getAttribute('data-id');
                        idsList.push(id);
                        // console.log(idsList)
                    }
                }
                var ids = idsList.join(',');
                var xhr = new XMLHttpRequest();
                xhr.open("get", /*`http://localhost/Secoo/php/myshoppingcardel.php?ids=${ids}`*/ `http://lk1299117937.gz01.bdysite.com/Secoo/php/myshoppingcardel.php?ids=${ids}`);
                xhr.send();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        let res = JSON.parse(xhr.responseText);
                        // console.log(res)
                        if (res.code == 1) {
                            idsList.forEach(id => {
                                document.getElementById("tr_" + id).remove();
                                // console.log( document.getElementById("tr_" + id))
                            })
                        } else {
                            alert(obj.msg);
                        }
                        getTotal();
                    }
                }
                break;
        }

        // 全选
        $('#checkAll').click(function () {
            var flag = $(this).prop('checked');
            $('.checkone').prop('checked', flag);
            getTotal();
        })

        // 反选
        $('.checkone').click(function () {
            var maxNum = $('.checkone').length;
            var checkedNum = $('.checkone:checked').length;
            if (maxNum == checkedNum) {
                $('#checkAll').prop('checked', true);
            } else {
                $('#checkAll').prop('checked', false);
            }
            getTotal();
        })

        // 计算合计
        function getTotal() {
            var allnum = 0;
            var allprice = 0;
            $('.checkone').each(function () {
                if (this.checked == true) {
                    var a = $(this).parent().next().next().next().find('.numbox').val();     //获取商品数量
                    // console.log(a);
                    var b = $(this).parent().next().next().find('.priceone').html();    //获取商品单价
                    // console.log(b);
                    allnum += parseInt(a * 1);
                    allprice += a * b;
                } else {
                    allnum += 0;
                    allprice += 0;
                }
                $('#checknum').html(allnum);
                $('#allPrice').html(allprice.toFixed(2));
            });
        }

        $('#payfor').click(function () {
            setTimeout(function () {
                location.href = './subtotal.html';
            }, 1500)
        })
    }





</script>

</html>